HarmonyOS鸿蒙学习笔记（13）@Watch的作用

2024-07-16 05:43| 来源: 网络整理| 查看: 265

在HarmonyOS鸿蒙学习笔记（12）@Link的作用我们知道@Link修饰的变量可以将子组件和父组件的数据进行双向绑定，当数据发生变化的时候会更改父组件或者子组件的UI状态。那么我们如果想要监听数据的变化该怎么办呢？@Watch的就是用来干这个的。

官方释义：@Watch用于监听状态变量的变化，语法结构为：

@State @Watch("onChanged") count : number = 0

下面写个代码测试下，该代码改编自博主上一篇博文HarmonyOS鸿蒙学习笔记（12）@Link的作用。代码如下：

@Entry @Component struct Player { //使用@Watch监听isPlaying,当isPlaying发生变化的时候执行valueChange方法 @State @Watch("valueChange") isPlaying: boolean = false build() { Column() { PlayButton({ buttonPlaying: $isPlaying }) Text(`Player is ${this.isPlaying ? '' : 'not'} playing`).fontSize(30).onClick(() => { this.isPlaying = !this.isPlaying; }) } } /** * 当isPlaying的值发生变化的时候执行valueChange方法 * @param propName 值为isPlaying */ valueChange(propName: string): void { console.log("invoke valueChange method " + propName) } } @Component struct PlayButton { @Link buttonPlaying: boolean build() { Column() { Button() { Text(this.buttonPlaying ? '暂停' : '播放') .textAlign(TextAlign.Center).fontSize(30).width('100%') }.onClick(() => { this.buttonPlaying = !this.buttonPlaying }) } } }

运行后的UI效果图：在这里插入图片描述

点击播放的时候变量isPlaying的值会改变，此时就会触发valueChange的执行，对此点击按钮之后，输入log如下：

[default][Console DEBUG] 09/30 13:50:47 18056 app Log: invoke valueChange method isPlaying [default][Console DEBUG] 09/30 13:50:47 18056 app Log: invoke valueChange method isPlaying [default][Console DEBUG] 09/30 13:50:48 18056 app Log: invoke valueChange method isPlaying [default][Console DEBUG] 09/30 13:51:05 18056 app Log: invoke valueChange method isPlaying

参考资料： @Watch官方文档 HarmonyOS鸿蒙学习笔记（12）@Link的作用

【本文地址】

公司简介

联系我们